import {Link} from "react-router-dom";
import {useSelector, useDispatch} from "react-redux";
import {deleteCommentAction} from "@/store/actions/commentAction.js";

export default function CommentItem({slug, comment}) {
    const currentUser = useSelector(state => state.user)
    const dispatch = useDispatch();
    const commentUser = comment.user
    const showDelete = currentUser.username === commentUser.username;
    return (
        <div className="card">
            {/* 评论内容 */}
            <div className='card-block'>
                <p className='card-text'>{comment && comment.body}</p>
            </div>
            <div className='card-footer'>
                <Link to={`/profile/${comment.user.username}`}>
                    <img
                        className="comment-author-img"
                        src={comment.user.avatar}
                        alt={comment.user.usernmae}/>
                </Link>
                {"  "}
                <Link to={`/profile/${comment.user.username}`}>
                    {comment.user.username}
                </Link>
                {"  "}
                {/* 创建时间 */}
                <span>
                    {new Date(comment.createdAt).toLocaleDateString()}
                </span>
                {
                    showDelete ? (
                        <button className=" mod-options" onClick={() => {
                            dispatch(deleteCommentAction(slug, comment.id))
                        }}>删除</button>
                    ) : null
                }
            </div>
        </div>
    )
}